<template>
	<view class="content">
		<uni-icons @click="to" class="publish" type="camera-filled" size="30"></uni-icons>
		<uni-search-bar class="search" @confirm="onSearch" v-model="searchValue" placeholder="请输入搜索关键字"></uni-search-bar>
		<view class="tab-bar">
			<view class="tab-item" v-for="(item, index) in tabList" :key="index" :class="currentTab === index ? 'active' : ''" @click="changeTab(index)">
				<text :style="{ fontSize: currentTab === index ? '32rpx' : '26rpx' }">{{ item }}</text>
			</view>
			<view class="tab-line" :style="{ left: (currentTab * 100) / tabList.length + '%' }"></view>
		</view>
		<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical" :direction="direction" @trigger="trigger" @fabClick="fabClick" />
		<view class="tab-content">
			<view v-if="currentTab === 0">
				<view class="container"></view>
				<list v-for="item in list">
					<view slot="template">
						<view class="post">
							<image :src="item.promulgatorImage" class="avatar"></image>
							<view class="info" @click="dynamicsContent(item._id)">
								<view class="name">{{ item.promulgatorName }}</view>
								<view class="time">{{ item.createTime }}</view>
								<view class="text">{{ item.content }}</view>
								<view class="image-list"><image v-for="(src, index) in item.photos" :key="index" :src="src" class="image"></image></view>
								<image class="img-comment" src="../../static/pinglun.png"></image>
								<text class="text-comment">{{ item.commentsCount }}</text>
							</view>
							<image v-show="item.like.indexOf(userId.toString()) === -1" class="img" src="../../static/dianzan-before.png" @click="giveThumbs(item._id)"></image>
							<image v-show="item.like.indexOf(userId.toString()) !== -1" class="img" src="../../static/dianzan-after.png" @click="giveThumbs(item._id)"></image>
							<text class="imgText">{{ item.likeCount }}</text>
						</view>
					</view>
				</list>
			</view>
			<view v-if="currentTab === 1">
				<view class="container"></view>
				<list v-for="item in list">
					<view slot="template">
						<view class="post">
							<image :src="item.promulgatorImage" class="avatar"></image>
							<view class="info" @click="dynamicsContent(item._id)">
								<view class="name">{{ item.promulgatorName }}</view>
								<view class="time">{{ item.createTime }}</view>
								<view class="text">{{ item.content }}</view>
								<view class="image-list"><image v-for="(src, index) in item.photos" :key="index" :src="src" class="image"></image></view>
								<image class="img-comment" src="../../static/pinglun.png"></image>
								<text class="text-comment">{{ item.commentsCount }}</text>
							</view>
							<image v-show="item.like.indexOf(userId.toString()) === -1" class="img" src="../../static/dianzan-before.png" @click="giveThumbs(item._id)"></image>
							<image v-show="item.like.indexOf(userId.toString()) !== -1" class="img" src="../../static/dianzan-after.png" @click="giveThumbs(item._id)"></image>
							<text class="imgText">{{ item.likeCount }}</text>
						</view>
					</view>
				</list>
			</view>
			<view v-if="currentTab === 2">暂无关注的朋友~</view>
			<view v-if="currentTab === 3">
				<view class="container"></view>
				<list v-for="item in list">
					<view slot="template">
						<view class="post">
							<image :src="item.promulgatorImage" class="avatar"></image>
							<view class="info" @click="dynamicsContent(item._id)">
								<view class="name">{{ item.promulgatorName }}</view>
								<view class="time">{{ item.createTime }}</view>
								<view class="text">{{ item.content }}</view>
								<view class="image-list"><image v-for="(src, index) in item.photos" :key="index" :src="src" class="image"></image></view>
								<image class="img-comment" src="../../static/pinglun.png"></image>
								<text class="text-comment">{{ item.commentsCount }}</text>
							</view>
							<image v-show="item.like.indexOf(userId.toString()) === -1" class="img" src="../../static/dianzan-before.png" @click="giveThumbs(item._id)"></image>
							<image v-show="item.like.indexOf(userId.toString()) !== -1" class="img" src="../../static/dianzan-after.png" @click="giveThumbs(item._id)"></image>
							<text class="imgText">{{ item.likeCount }}</text>
						</view>
					</view>
				</list>
			</view>
		</view>
	</view>
</template>

<script>
var QQMapWX = require('../../lib/qqmap-wx-jssdk.min.js');
var qqmapsdk;
export default {
	data() {
		return {
			userId:'',
			thumbsImg:'../../static/dianzan-before.png',
			imgBefore:'../../static/dianzan-before.png',
			imgAfter:'../../static/dianzan-after.png',
			isLike:false,
			title: 'uni-fab',
			directionStr: '垂直',
			horizontal: 'right',
			vertical: 'bottom',
			direction: 'horizontal',
			pattern: {
				color: '#7A7E83',
				backgroundColor: '#fff',
				selectedColor: '#007AFF',
				buttonColor: '#007AFF',
				iconColor: '#fff'
			},
			is_color_type: false,
			content: [
				{
					iconPath: '/static/liaotian.png',
					selectedIconPath: '/static/liaotian.png',
					text: '聊天',
					active: false
				}
			],
			list: [],
			searchValue: '',
			tabList: ['同城', '推荐', '关注', '我的'],
			currentTab: 0,
			cityName: ''
		};
	},
	onLoad() {
		let that = this;
		that.userId = uni.getStorageSync('userId');
		this.loadAddress();
	},
	methods: {
		giveThumbs(id){
			let that = this;
			that.ajax(that.url.giveThumbs + "?dynamicId=" + id + "&city=" + that.cityName, "GET", null, function(resp){
				if(resp.data.result == true){
					uni.showToast({
						icon:'none',
						title:'点赞成功！'
					})
					if(that.currentTab == 0){
						that.loadSameCityMessage();
					}else if(that.currentTab == 1){
						that.loadHotDynamicsMessage();
					}else if(that.currentTab == 3){
						that.loadMyDynamicsMessage();
					}
				}else if(resp.data.result == false){
					uni.showToast({
						icon:'none',
						title:'取消点赞成功！'
					})
					if(that.currentTab == 0){
						that.loadSameCityMessage();
					}else if(that.currentTab == 1){
						that.loadHotDynamicsMessage();
					}else if(that.currentTab == 3){
						that.loadMyDynamicsMessage();
					}
				}
				
			})
		},
		dynamicsContent(id) {
			console.log(id, '进入详情');
			uni.navigateTo({
				url: '/pages/dynamics_content/dynamics_content?id=' + id + '&city=' + this.cityName
			});
		},
		trigger(e) {
			console.log(e);
			uni.navigateTo({
				url: '/pages/friend_list/friend_list'
			});
		},
		fabClick() {
			// uni.showToast({
			// 	title: '点击了悬浮按钮',
			// 	icon: 'none'
			// });
		},
		loadAddress() {
			let that = this;
			(qqmapsdk = new QQMapWX({
				key: 'KSFBZ-2MX6J-2PRFM-KVWBE-37KUE-W3FLZ'
			})),
				uni.getLocation({
					type: 'wgs84',
					success: function(resp) {
						let latitude = resp.latitude;
						let longitude = resp.longitude;
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: latitude,
								longitude: longitude
							},
							success: function(resp) {
								// console.log(resp.result)
								let address = resp.result.address;
								let addressComponent = resp.result.address_component;
								let city = addressComponent.city;
								that.cityName = addressComponent.city;
								let district = addressComponent.district;
								console.log('this.cityName', that.cityName);
								//在这里进行数据的加载
								setTimeout(() => {
									that.loadSameCityMessage();
								}, 100);
							}
						});
					}
				});
		},
		to() {
			uni.navigateTo({
				url: '/pages/dynamics_publish/dynamics_publish?city=' + this.cityName
			});
		},

		changeTab(index) {
			this.currentTab = index;
			if (this.currentTab == 0) {
				this.loadSameCityMessage();
			} else if (this.currentTab == 3) {
				this.loadMyDynamicsMessage();
			} else if (this.currentTab == 1){
				this.loadHotDynamicsMessage();
			}
		},
		loadHotDynamicsMessage(){
			let that = this;
			that.ajax(that.url.searchHotDynamic, "GET", null, function(resp){
				that.list = resp.data.result;
			})
		},
		loadMyDynamicsMessage() {
			let that = this;
			that.ajax(that.url.searchMyDynamic, 'GET', null, function(resp) {
				that.list = resp.data.result;
			});
		},
		loadSameCityMessage() {
			let that = this;
			that.ajax(that.url.searchCityWide + '?city=' + that.cityName, 'GET', null, function(resp) {
				that.list = resp.data.result;
				console.log(that.list[0].like, "that.list.like");
			});
		},
		handleLike(item) {
			// 点赞处理
			item.likeCount = item.likeCount + 1;
		},
		handleComment(item) {
			// 评论处理
			item.commentsCount = item.commentsCount + 1;
		},
		onSearch(res) {
			let that = this;
			uni.navigateTo({
				url: '/pages/search_result/search_result?searchValue=' + that.searchValue + '&flag=1'
			});
			uni.showToast({
				title: '搜索：' + res.value,
				icon: 'none'
			});
		}
	}
};
</script>

<style>
.text-comment {
	position: absolute;
	margin-top: 35rpx;
	/* margin-top: 803rpx;
		margin-left: 558rpx;
		font-weight: 500; */
}
.img-comment {
	/* position: absolute; */
	width: 72rpx;
	height: 63rpx;
	margin-top: 20rpx;
	margin-left: 400rpx;
	/* margin-top: 788rpx;
		margin-left: 480rpx; */
}
.img {
	/* position: absolute; */
	/* margin-left: 480rpx; */
	/* margin-top: 880rpx; */
	width: 78rpx;
	height: 63rpx;
	margin-right: 35rpx;
}
.imgText {
	position: absolute;
	margin-left: 632rpx;
	margin-top: 10rpx;
}
.publish {
	position: absolute;
	margin-left: 620rpx;
	margin-top: 20rpx;
}
.tab-bar {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 50px;
	width: 450rpx;
	border-bottom: 1px solid #e5e5e5;
	display: flex;
	flex-direction: row;
	background-color: #fff;
}

.tab-item {
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 1;
	height: 100%;
	color: #333333;
	font-size: 14px;
	position: relative;
}

.tab-item:after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 1px;
	background-color: #007aff;
	transform: scaleX(0);
	transition: transform 0.2s ease;
	transform-origin: 2 2;
}

.tab-item.active {
	color: #007aff;
	font-size: 16px;
}

.tab-item.active:after {
	transform: scaleX(1);
}

.tab-content {
	margin-top: 10px;
	padding: 0 12px;
}
.container {
	background-color: #f8f8f8;
}
.search {
	display: flex;
	flex-direction: row;
	/* align-items: flex-start; */
	/* padding: 20rpx; */
	background-color: #fff;
	/* margin-top: 10rpx; */
	/* border-radius: 20rpx; */
	/* box-shadow: 0 0 20rpx #ccc; */
}
.post {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	padding: 20rpx;
	background-color: #fff;
	margin-top: 20rpx;
	border-radius: 10rpx;
	box-shadow: 0 0 20rpx #ccc;
	padding-bottom: 40rpx;
}
.avatar {
	width: 100rpx;
	height: 80rpx;
	border-radius: 100%;
}
.info {
	margin-left: 20rpx;
	flex: 1;
}
.name {
	font-weight: bold;
	font-size: 36rpx;
}
.time {
	color: #888;
	font-size: 28rpx;
	margin-top: 10rpx;
}
.text {
	font-size: 32rpx;
	margin-top: 10rpx;
}
.image-list {
	display: flex;
	flex-wrap: wrap;
	margin-top: 10rpx;
}
.image {
	width: 200rpx;
	height: 200rpx;
	margin-right: 10rpx;
	margin-bottom: 10rpx;
}
.actions {
	display: flex;
	flex-direction: row;
	margin-top: 20rpx;
}
.like,
.comment {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-right: 30rpx;
	font-size: 28rpx;
	color: #888;
	cursor: pointer;
}
.text {
	margin-left: 10rpx;
}
</style>
